<template>
    <page-container>
        <!-- 头部 -->
        <cu-custom slot="header" :isBack="true">
            <block slot="content">消息</block>
        </cu-custom>
        <!-- 内容 -->
        <view slot="center" class="content-center">
            <mescroll ref="mescrollRef" @init="mescrollInit" height="90%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
                <!-- 四个按钮 -->
                <view class="four-GongGe">
                    <view class="four-img" @click="toLogistics">
                        <image :src="staticImgUrl + 'chat/green.png'" mode=""></image>
                        <view class="four-text">交易物流</view>
                    </view>
                    <view class="four-img" @click="toInteractive">
                        <image :src="staticImgUrl + 'chat/orange.png'" mode=""></image>
                        <view class="four-text">互动</view>
                    </view>
                    <view class="four-img" @click="toComment">
                        <image :src="staticImgUrl + 'chat/pink.png'" mode=""></image>
                        <view class="four-text">评论</view>
                    </view>
                    <view class="four-img" @click="toMessage">
                        <image :src="staticImgUrl + 'chat/blue.png'" mode=""></image>
                        <view class="four-text">账户通知</view>
                    </view>
                </view>
                <!-- 系统公告 -->
                <view class="system-content" @click="toSystemmsg">
                    <view class="system-logo">
                        <image :src="staticImgUrl + 'chat/notice.png'" mode=""></image>
                        <image :src="staticImgUrl + 'chat/trumpet.png'" mode="" class="trumpet"></image>
                    </view>
                    <view class="system-title">系统公告</view>
                </view>
                <!-- 灰色分线 -->
                <view class="borderfx"></view>
                <!-- 消息列表 -->
                <view class="msg-content" v-for="(item, inx) in historyMembers" :key="inx">
                    <!-- v-if="item.site_id > 0" -->
                    <view class="msg-list" @click="toStoreim(item)">
                        <view class="msg-left" :style="{ 'align-items': item.last_chat == null ? 'center' : '' }">
                            <view class="portrait" v-if="!item.type">
                                <image :src="item.logo" mode=""></image>
                            </view>
                            <view class="portrait" v-if="item.type==1">
                                <image :src="staticImgUrl + 'chat/jywlicon.png'" mode=""></image>
                            </view>
                            <view class="portrait" v-if="item.type==2">
                                <image :src="staticImgUrl + 'chat/hdxxicon.png'" mode=""></image>
                            </view>
                            <view class="portrait" v-if="item.type==3">
                                <image :src="staticImgUrl + 'chat/plicon.png'" mode=""></image>
                            </view>
                            <view class="portrait" v-if="item.type==4">
                                <image :src="staticImgUrl + 'chat/zhtzicon.png'" mode=""></image>
                            </view>
                            <view class="msg-text-content">
                                <view class="msg-text-top" v-if="!item.type">{{ item.site_name }}</view>
                                <view class="msg-text-top" v-if="item.type==1">交易物流</view>
                                <view class="msg-text-top" v-if="item.type==2">互动</view>
                                <view class="msg-text-top" v-if="item.type==3">评论</view>
                                <view class="msg-text-top" v-if="item.type==4">账户通知</view>
                                <view class="msg-text-bottom" v-if="item.last_chat!=null&&!item.type">{{ item.last_chat.content }}</view>
                                <view class="msg-text-bottom" v-if="item.type==1">{{ item.sku_name+','+item.content }}</view>
                                <view class="msg-text-bottom" v-if="item.type==2">{{ item.content }}</view>
                                <view class="msg-text-bottom" v-if="item.type==3">{{ item.content }}</view>
                                <view class="msg-text-bottom" v-if="item.type==4">{{ item.content+','+item.remark }}</view>
                            </view>
                            <view class="msg-right" style="width: 200rpx;" v-if="item.last_chat!=null&&!item.type">{{$Utils.dateStr(item.create_time*1000)}}</view>
                            <view class="msg-right" style="width: 200rpx;" v-if="item.type">{{$Utils.dateStr(item.create_time*1000)}}</view>
                        </view>
                        <view class="fgx"></view>
                    </view>
                    <!-- 					<view class="msg-list" @click="toServicechat" v-else>

						<view class="msg-left" :style="{'align-items':item.last_chat!=null? 'center':''}">
							<view class="portrait">
								<image :src="staticImgUrl + 'chat/service.png'" mode=""></image>
							</view>
							<view class="msg-text-content">
								<view class="msg-text-top">{{item.site_name}}</view>
								<view class="msg-text-bottom" v-if="item.last_chat!=null">{{item.last_chat.content}}</view>
							</view>
							<view class="msg-right">{{item.last_chat.create_time}}</view>
						</view>
						<view class="fgx"></view>
					</view> -->
                </view>
                <!-- 官方 -->
                <view class="msg-content" style="padding-top:20rpx;padding-bottom:0;">
                    <view class="msg-list" @click="toServicechat()">
                        <view class="msg-left" style="align-items: center;">
                            <view class="portrait">
                                <image :src="staticImgUrl + 'logo.png'" mode=""></image>
                            </view>
                            <view class="msg-text-content">
                                <view class="msg-text-top">醒目购官方客服</view>
                            </view>
                        </view>
                        <view class="fgx"></view>
                    </view>
                </view>
            </mescroll>
        </view>
    </page-container>
</template>

<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	data() {
		return {
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			page: 1,
			nativeApp: false,
			historyMembers: []
		}
	},
	onLoad() {
		// #ifdef H5
		if (!this.isNativeApp()) {
			this.nativeApp = true
		}
		// #endif

		// #ifdef MP-WEIXIN
		this.nativeApp = true
		// #endif
	},
	created() {
		// this.gethistoryMembers(1, 10);
		// console.log("this.isNativeApp",this.isNativeApp(),"nativeApp",this.nativeApp)
	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			// #ifdef MP-WEIXIN
			if (!uni.getStorageSync('token')) {
				this.mescroll.endSuccess(0)
				return false
			}
			// #endif
			this.mescroll.resetUpScroll()
			// this.gethistoryMembers(1, 10);
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			// #ifdef MP-WEIXIN
			if (!uni.getStorageSync('token')) {
				this.mescroll.endSuccess(0)
				return false
			}
			// #endif
			console.log('logpage', page)
			// var page = this.page;
			// page++;
			this.gethistoryMembers(page.num, 10)
		},
		gethistoryMembers(page, page_size) {
			if (uni.getStorageSync('token')) {
				this.$request.historyMembers({
					page,
					page_size
				}).then(res => {
					console.log('historyMembers', res)
					this.mescroll.endSuccess(res.data.length)
					if (res.data.length > 0) {
						if (page == 1) {
							this.historyMembers = res.data
							this.page = 1
						} else {
							this.historyMembers = this.historyMembers.concat(res.data)
							this.page = page
						}
					}
				}).catch(() => {
					this.mescroll.endErr()
				})

			} else {
				this.mescroll.endSuccess(0)
			}
		},
		toMessage() {
			this.$util.redirectTo('/chatPages/message/message')
		},
		toLogistics() {
			this.$util.redirectTo('/chatPages/logistics/logistics')
		},
		toSystemmsg() {
			this.$util.redirectTo('/chatPages/systemmsg/systemmsg')
		},
		toInteractive() {
			this.$util.redirectTo('/chatPages/interactive/interactive')
		},
		toComment() {
			this.$util.redirectTo('/chatPages/comment/comment')
		},
		toStoreim(item) {
			console.log(item)
			if (item.type) {
				console.log(item.type)
				if (item.type == 1) {
					this.$util.redirectTo('/chatPages/logistics/logistics')
				} else if (item.type == 2) {
					this.$util.redirectTo('/chatPages/interactive/interactive')
				} else if (item.type == 3) {
					this.$util.redirectTo('/chatPages/comment/comment')
				} else if (item.type == 4) {
					this.$util.redirectTo('/chatPages/message/message')
				}
				return
			}
			if (item.servicer_id == 0) {
				this.$util.redirectTo('/chatPages/servicechat/servicechat', {
					servicer_id: 0
				})
			} else {
				this.$util.redirectTo('/chatPages/storeim/storeim', {
					servicer_id: item.servicer_id,
					site_name: item.site_name,
					site_id: item.site_id
				})
			}
		},
		toServicechat() {
			this.$util.redirectTo('/chatPages/servicechat/servicechat', {
				servicer_id: 0
			})
		}
	},
	mounted() { }
}
</script>

<style lang="scss" scoped>
.base-page[data-v-332a36c8] {
    background: linear-gradient(180deg, #ffffff, #eeeeee) !important;
}

.text-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

image {
    // width: 100%;
    height: 100%;
}

.content-center {
    width: 100%;

    .four-GongGe {
        width: 96%;
        margin: 0 auto;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .four-img {
            position: relative;
            width: 150rpx;
            height: 80rpx;

            .four-text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 150rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
            }
        }
    }
}

.system-content {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 40rpx 36rpx 30rpx 36rpx;

    .system-logo {
        width: 80rpx;
        height: 80rpx;
        position: relative;

        .trumpet {
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .system-title {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        padding-left: 43rpx;
    }
}

.borderfx {
    width: 100%;
    height: 10rpx;
    background: #eeeeee;
}

.fgx {
    width: 720rpx;
    height: 1rpx;
    background: #eeeeee;
    margin: 30rpx auto;
}

.msg-content {
    width: 100%;
    padding-top: 30rpx;
    // padding-bottom: 30rpx;

    .msg-list {
        width: 90%;
        margin: 0 auto;

        .msg-left {
            display: flex;
            align-items: flex-start;

            .portrait {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
            .portrait image {
                border-radius: 50%;
            }

            .msg-right {
                font-size: 22rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
                text-align: right;
            }
        }

        .msg-text-content {
            width: 60%;
            line-height: 40rpx;
            padding-left: 20rpx;
            padding-right: 20rpx;

            .msg-text-top {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #222222;
            }

            .msg-text-bottom {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>
